<template>
	<view class="my-container">
		<view
			class="my-top"
			:style="{
				backgroundImage: `url(${indexBackgroundImage})`,
				backgroundRepeat: 'no-repeat',
				backgroundSize: '100% calc(100% - 10px)'
			}"
		>
			<view class="setting-container">
				<view class="setting-box">
					<up-icon name="/static/solver-my/card.png" size="24"></up-icon>
					<up-icon name="/static/solver-my/setting.png" size="24"></up-icon>
				</view>
			</view>
			<view class="user-container">
				<view class="avatar-box">
					<up-avatar :src="avatarUrl" size="64"></up-avatar>
					<u-text v-if="!userStore.token" size="18" text="登录/注册" bold color="#000"></u-text>
					<view v-else class="user-name-box">
						<u-text size="18" :text="userName" lineHeight="18" bold color="#000"></u-text>
						<u-text size="14" :text="userId" lineHeight="14" color="#888"></u-text>
					</view>
				</view>
				<view class="user-btn-box">
					<view v-if="!userStore.token" class="unlogin-btn-box">
						<u-text text="去登录" color="#fff" suffixIcon="arrow-right" iconStyle="margin-left: 5px;color: #fff;"></u-text>
					</view>
					<view v-else class="login-btn-box">
						<up-icon name="arrow-right" color="#ccc" size="14"></up-icon>
					</view>
				</view>
			</view>
			<view class="handle-box">
				<view v-for="(item, index) in handleBtnList" :key="`my-btn-${index}`" class="handle-item">
					<up-icon :name="item.iconUrl" size="32"></up-icon>
					<u-text size="14" :text="item.name" lineHeight="12" color="#333" align="center"></u-text>
				</view>
			</view>
			<view class="activate-vip-box">
				<image
					:src="vipImageSrc"
					mode="widthFix"
					:style="{
						display: 'inline-block',
						width: '100%'
					}"
				></image>
			</view>
		</view>
		<view class="setting-list-box">
			<view
				class="setting-list-bg"
				:style="{
					backgroundImage: `url(${settingBgImage})`,
					backgroundRepeat: 'no-repeat',
					backgroundSize: '100% 100%'
				}"
			>
				<view class="list-box">
					<view class="list-box-title">
						<u-text size="16" bold text="常见工具"></u-text>
					</view>
					<up-list height="auto" :scrollable="false">
						<up-list-item v-for="(item, index) in toolList">
							<up-cell :border="false">
								<template #icon>
									<up-icon :name="item.iconUrl" size="20"></up-icon>
								</template>
								<template #title>
									<u-text size="14" :text="item.name"></u-text>
								</template>
								<template #right-icon>
									<view class="right-box">
										<up-icon name="arrow-right" size="12" color="#999"></up-icon>
									</view>
								</template>
							</up-cell>
						</up-list-item>
					</up-list>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { useUserStore } from '@/store/modules/user';
import { handleItemList } from '@/utils/constant';
import indexBackgroundImage from '@/static/solver-my/my-bg.png';
import settingBgImage from '@/static/solver-my/setting-bg.png';

defineOptions({
	name: 'SolverMyIndex'
});

const userStore = useUserStore();

// 操作的列表
const handleBtnList = ref<typeof handleItemList>(handleItemList);

// 用户头像
const avatarUrl = computed(() => {
	if (userStore.token) {
		return '';
	} else {
		return '/static/solver-my/unlogin-avatar.png';
	}
});

// 用户名称
const userName = computed(() => {
	if (userStore.token) {
		// return userStore.userInfo.userName;
		return '用户1';
	} else {
		return '';
	}
});
// 用户ID
const userId = computed(() => {
	if (userStore.token) {
		return `ID: ${userStore.userInfo.userId}`;
	} else {
		return '';
	}
});

// 开通vip的图片路径
const vipImageSrc = computed(() => {
	if (userStore.userInfo.isVIP) {
		return '/static/solver-my/has-vip.png';
	} else {
		return '/static/solver-my/activate-VIP.png';
	}
});

// 工具列表
const toolList = ref([
	{
		name: '历史标书',
		iconUrl: '/static/solver-my/history-bidding.png'
	},
	{
		name: '认证中心',
		iconUrl: '/static/solver-my/authentication-center.png'
	},
	{
		name: '切换身份',
		iconUrl: '/static/solver-my/switching-identities.png'
	},
	{
		name: '意见反馈',
		iconUrl: '/static/solver-my/feedback.png'
	},
	{
		name: '设置',
		iconUrl: '/static/solver-my/list-item-setting.png'
	}
]);
</script>

<style lang="scss" scoped>
$padding: 15px;
$topDistance: 20px;
.container {
	background-color: #f7f7f7;
}
.my-container {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: calc(100% + 10px);
	padding-bottom: 10px;
	background-color: #f7f7f7;
	box-sizing: border-box;
	overflow: auto;
}
.my-top {
	position: relative;
	width: 100%;
}
.setting-container {
	display: flex;
	justify-content: flex-end;
	width: 100%;
	padding: $padding;
	box-sizing: border-box;
}
.setting-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
.user-container {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.avatar-box {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-left: $padding;
}
.user-name-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.unlogin-btn-box {
	padding: 6px $padding 6px 20px;
	background-color: #00cb6b;
	border-radius: 20px 0 0 20px;
}
.login-btn-box {
	padding-right: $padding;
}
.handle-box {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	padding: $padding;
}
.handle-item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
}
.activate-vip-box {
	position: relative;
	z-index: 100;
	width: 100%;
	padding: $padding $padding 0;
}
.setting-list-box {
	position: relative;
	flex: 1 auto;
	width: 100%;
}
.setting-list-bg {
	position: absolute;
	top: -$topDistance;
	left: 0;
	width: 100%;
	padding-top: $topDistance + 10px;
	box-sizing: border-box;
}
.list-box {
	width: calc(100% - 2 * $padding);
	margin: 0 $padding;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 10px;

	.list-box-title {
		padding: $padding;
	}
}
</style>
